<template>
	<div class="login-box-menu">
		<div class="left">
			<img src="/logo.svg" alt="" />
			<span>{{ locale.login.title }}</span>
		</div>
		<div class="right">
			<div class="login-box-menu-item" style="border-left: none">2.0.0-alpha.3</div>
			<div class="login-box-menu-item">
				<a-dropdown placement="bottom" :arrow="false" @click.prevent>
					<a class="ant-dropdown-link" @click.prevent>
						<!-- 自定义 icon -->
						<icon>
							<template #component="svgProps">
								<svg v-bind="svgProps" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2010" width="16" height="16">
									<path
										d="M651.3 390.041h325.224a47.76 47.76 0 0 1 46.623 48.897v536.165A47.76 47.76 0 0 1 976.524 1024H419.322a47.76 47.76 0 0 1-46.623-48.897V633.959H46.907A47.76 47.76 0 0 1 0.284 585.062V48.897A47.76 47.76 0 0 1 46.907 0h557.77A47.76 47.76 0 0 1 651.3 48.897zM46.907 585.061h557.77V48.898H46.907v536.165z m635.665-16.488l-102.343 278.6h45.485l25.018-71.64h113.714l25.018 71.64h43.78l-102.912-278.6z m-22.175 170.572l44.35-126.223 47.19 126.223z m-354.22-625.43h35.251v71.071h135.32v188.198h-35.251V350.81H341.428V481.58h-33.546V350.81h-97.226v22.174h-35.251V184.786h132.477z m-95.52 200.706h96.657v-93.246h-96.658z m130.771 0h100.069v-93.246H341.428z"
										fill="#333333"
										p-id="2011"
										data-spm-anchor-id="a313x.search_index.0.i5.49043a81w4f1YM"
										class="selected"></path>
								</svg>
							</template>
						</icon>
						<icon style="margin-left: 6px">
							<template #component="svgProps">
								<svg v-bind="svgProps" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1211" width="16" height="16">
									<path
										d="M512 657.723077c-7.876923 0-15.753846-3.938462-19.692308-7.876923l-240.246154-232.369231c-11.815385-11.815385-11.815385-31.507692 0-43.323077 11.815385-11.815385 31.507692-11.815385 43.323077 0l220.553847 212.676923 220.553846-212.676923c11.815385-11.815385 31.507692-11.815385 43.323077 0 11.815385 11.815385 11.815385 31.507692 0 43.323077l-240.246154 232.369231c-11.815385 3.938462-19.692308 7.876923-27.569231 7.876923z"
										fill="#333333"
										p-id="1212"></path>
								</svg>
							</template>
						</icon>
					</a>
					<template #overlay>
						<a-menu @click="handleLanguageChange">
							<a-menu-item :class="{ 'ant-menu-item-active': i18n.getLanguage() === 'zh-cn' }" key="zh-cn">{{ locale.login.langArray[0] }}</a-menu-item>
							<a-menu-item :class="{ 'ant-menu-item-active': i18n.getLanguage() === 'zh-tw' }" key="zh-tw">{{ locale.login.langArray[1] }}</a-menu-item>
							<a-menu-item :class="{ 'ant-menu-item-active': i18n.getLanguage() === 'en' }" key="en">{{ locale.login.langArray[2] }}</a-menu-item>
						</a-menu>
					</template>
				</a-dropdown>
			</div>
			<div class="login-box-menu-item">
				<!-- 自己实现亮暗主题切换 switch -->
				<Switch v-model:value="isDark">
					<template #activeIcon><i class="iconfont icon-yueliang"></i></template>
					<template #inactiveIcon><i class="iconfont icon-taiyang"></i></template>
				</Switch>
			</div>
			<div class="login-box-menu-item">
				<GithubOutlined />
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { i18n } from '../../../i18n';
import { setTheme } from '../../../utils/theme';
import type { MenuProps } from 'ant-design-vue';
import { useLocale } from '../../../hooks/locale';
import { localForage } from '../../../localforage';
import Switch from '../../../components/Switch.vue';
import Icon, { GithubOutlined } from '@ant-design/icons-vue';

// 实现语言切换 - hooks
const { locale }= useLocale();

// 处理语言下拉
const handleLanguageChange: MenuProps['onClick'] = ({ key }) => {
	i18n.setLanguage(<'zh-cn' | 'zh-tw' | 'en'>key);
	localForage.setItem('language', key);
};

// 从 localStorage 中获取，并设置主题
const isDark = ref(Boolean(localForage.getItem('theme') === 'dark'));
watch(
	() => isDark.value,
	val => setTheme(val ? 'dark' : 'light')
);
</script>

<style lang="less" scoped>
.login-box-menu {
	transition: all 0.3s;
	border-bottom: solid var(--colorBorder) 1px;
	height: 64px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.right {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
}
.login-box-menu .left {
	transition: all 0.3s;
	color: var(--colorText);
	font-size: 18px;
	font-weight: 800;
	user-select: none;
	height: 100%;
	display: flex;
	align-items: center;
	img {
		height: 50%;
		margin: 0 20px;
	}
}
.login-box-menu-item {
	color: var(--colorText);
	transition: all 0.3s;
	user-select: none;
	cursor: pointer;
	padding: 0 20px;
	border-left: solid var(--colorBorder) 1px;
	svg path {
		fill: var(--colorText);
		transition: all 0.3s;
	}
}
</style>
